
import { useState } from 'react';
import store from './redux/store';
import { userNameAction, unreadCountActionThunk, unreadCountActionPromise } from './redux/action';

export default function ProfileSetting(props) {
    const [username, setUsername] = useState("");
    const [loading, setLoading] = useState(false);
    return (
        <div className='profile-setting'>
            个人信息设置页面：<br />
            <span style={{ marginRight: '10px' }}>{props.username}</span>


            <input placeholder="新用户名"
                value={username}
                onChange={e => setUsername(e.target.value)}
            />
            <button onClick={e => {
                store.dispatch(userNameAction(username));
                setUsername('');
                console.log('修改成功');
            }}>修改</button>

            <br />
            由后端耗时2s获取未读消息条数：
            <button onClick={() => {
                setLoading(true);

                // setTimeout(() => {
                //     const unReadCount = Math.floor(Math.random() * 20);
                //     store.dispatch({ type: 'getUnreadCount', payload: unReadCount });
                //     setLoading(false);
                // }, 2000);

                // 想要收敛action
                // 1. 这种方式的改造显然是不成功的，获取不到值                
                // store.dispatch(unreadCountAction1(() => setLoading(false)));

                // 2. redux-thunk风格： action返回的是一个函数
                // 此处依旧调用store.dispatch，是为了给返回的函数回调一个dispatch方法
                // store.dispatch(unreadCountActionThunk(() => setLoading(false)));
                // unreadCountAction2(() => setLoading(false));

                // 3. redux-promise风格： action返回的是一个promise
                store.dispatch(unreadCountActionPromise(() => setLoading(false)));

            }}

            >{loading ? 'loading...' : '延时获取'}</button>

        </div>
    )
}